﻿@namespace BlazorComponent

@using Microsoft.AspNetCore.Components

<style>
    .foup-container {
        display: flex;
        flex-direction: column;
        width: 120px; /* 更窄的宽度 */
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
        background: white;
        border: 1px solid #d1dbe5; /* 主容器边框 */
        position: relative;
        margin: 4px;
    }

        .foup-container::after {
            content: "";
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border: 1px dashed #2196F3; /* 外部虚线边框 */
            border-radius: 9px;
            pointer-events: none;
            z-index: -1;
        }

    .foup-header {
        background: linear-gradient(135deg, #2196F3, #0d8aee);
        color: white;
        font-weight: 600;
        font-size: 1rem; /* 更小的标题字体 */
        text-align: center;
        padding: 5px 0; /* 更紧凑的头部 */
        position: relative;
    }

    .foup-list {
        display: flex;
        flex-direction: column;
        gap: 2px; /* 槽位间更小间距 */
        padding: 3px; /* 列表内更少内边距 */
        background-color: #f8fafd;
    }

    .foup-item {
        background: white;
        border: 1px solid #e0e7ff;
        border-radius: 6px; /* 更小的圆角 */
        padding: 3px 0; /* 显著减少高度 */
        text-align: center;
        font-weight: 500;
        font-size: 0.85rem; /* 更小的槽位字体 */
        color: #2d3748;
        cursor: pointer;
        transition: all 0.15s ease;
        position: relative;
        height: 22px; /* 固定槽位高度 */
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .foup-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(to right, #e0f2fe, #bae6fd);
            opacity: 0.8;
        }

        .foup-item:hover {
            transform: translateY(-1px);
            border-color: #93c5fd;
        }

        .foup-item.selected {
            background: linear-gradient(to bottom, #e0f2fe, #bbe6ff);
            border-color: #60a5fa;
            color: #1e40af;
            font-weight: 600;
            box-shadow: 0 2px 4px rgba(33, 150, 243, 0.15);
        }

            .foup-item.selected::before {
                background: linear-gradient(to right, #60a5fa, #3b82f6);
                opacity: 1;
            }
</style>

<div class="foup-container" @attributes="AdditionalAttributes">
    <div class="foup-header">
        @CarrierName
    </div>

    <div class="foup-list">
        @foreach (var slot in FoupSlots.OrderByDescending(s => s.Number))
        {
            <div class="foup-item @(slot.IsSelected ? "selected" : "")"
                 @onclick="() => SelectSlot(slot.Number)">
                @slot.Number.ToString("00")
            </div>
        }
    </div>
</div>

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object>? AdditionalAttributes { get; set; }

    [Parameter]
    public string CarrierName { get; set; } = "Carrier1";

    [Parameter]
    public List<int> SlotNumbers { get; set; } = Enumerable.Range(1, 25).ToList();

    [Parameter]
    public string SelectedSlotId { get; set; }

    [Parameter]
    public EventCallback<string> OnSlotSelected { get; set; }

    private List<FoupSlot> FoupSlots { get; set; } = new();

    protected override void OnInitialized()
    {
        InitializeSlots();
    }

    protected override void OnParametersSet()
    {
        InitializeSlots();
    }

    private void InitializeSlots()
    {
        string carrierName = string.Empty;
        string slotNumber = string.Empty;

        if (SelectedSlotId != null && SelectedSlotId.Contains("-"))
        {
            var parts = SelectedSlotId.Split("-");
            carrierName = parts[0];
            slotNumber = parts[1];
        }

        FoupSlots = SlotNumbers
            .Select(n => new FoupSlot
            {
                Number = n,
                IsSelected = carrierName == CarrierName && n.ToString() == slotNumber,
            }).ToList();
    }

    private async Task SelectSlot(int slotNumber)
    {
        SelectedSlotId = $"{CarrierName}-{slotNumber}";
        InitializeSlots(); // 重新初始化确保选中状态更新

        if (OnSlotSelected.HasDelegate)
        {
            await OnSlotSelected.InvokeAsync(SelectedSlotId);
        }
        this.StateHasChanged();
    }

    private class FoupSlot
    {
        public int Number { get; set; }
        public bool IsSelected { get; set; }
    }
}